<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card class="user-container">
      <!-- 1行-->
      <el-row>
        <!--将单一的分栏分为24列,该列在栅格占比个数为8格 -->
        <el-col :span="8">
          <!-- 添加按钮:添加分类 -->
          <el-button
            type="success"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
          >
            添加分类
          </el-button>
        </el-col>
      </el-row>
      <!-- 建立数据表格 -->
      <el-table :data="types" border stripe>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column
          label="分类名称"
          prop="category_name"
        ></el-table-column>
      </el-table>
      <!-- 3.分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog :title="'添加分类'" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="Rules" label-width="80px">
        <el-form-item label="分类名" prop="category_name">
          <el-input
            v-model="form.category_name"
            placeholder="请输入分类名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onsubmit">提交</el-button>
          <el-button @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      types: [],
      page: 1, //当前页码
      size: 5, //每页显示记录
      total: 0, //共计记录数
      dialogVisible: false, //对话框开始状态
      //表单存储数据
      form: {
        category_name: '',
      },
      //输入规则
      Rules: {
        category_name: [
          //不能为空;提示信息;触发,失去焦点的时候
          { required: true, message: '分类名不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    //调用函数
    this.getTypes()
  },
  methods: {
    getTypes() {
      this.$http
        .get(`/categories?page=${this.page}&size=${this.size}`)
        .then((res) => {
          //更新types数组中的数据
          this.types = res.result.data
          //更新总记录条数
          this.total = res.result.total
        })
    },
    //每页显示的页数
    handleSizeChange(s) {
      this.size = s
      this.getTypes()
    },
    ////当前是第几页
    handleCurrentChange(p) {
      this.page = p
      this.getTypes()
    },
    //点击添加分类,弹出对话框
    handleAdd() {
      //给form表单中赋为空
      this.form = {}
      //显示对话框,添加状态
      this.dialogVisible = true
    },
    onsubmit() {
      //实现表单校验
      this.$refs['form'].validate((valid) => {
        //判断校验,成功发送axios请求
        if (valid) {
          //发送post,添加请求接口
          this.$http.post('/categories', this.form).then((res) => {
            const { code, message } = res
            //判断如果code等于0,那么抛出异常,等于0,那么提示成功信息
            if (code != 0) {
              // 提示,抛出异常
              this.$message.error(message)
              return
            }
            this.$message({
              type: 'success',
              message: message,
              showClose: true,
              duration: 1000,
            })
            // 1. 关闭对话框
            this.dialogVisible = false
            // 2. 重新获取数据
            this.getTypes()
            // 3. 清空表单
            this.$refs['form'].resetFields()
          })
        }
      })
    },
    //点击取消,返回分类页面
    Cancel() {
      //更改对话框状态
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped>
/*
scoped 作用域:
在这写的样式,只影响当前组件
*/
.el-breadcrumb {
  font-size: 20px;
}
.user-container {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
